<script setup lang="ts">
    import { ref } from 'vue'
    import { useWindowStore } from "@renderer/store"
    // import { useIpcRenderer } from "@vueuse/electron"
    import { CollapseModelValue } from 'element-plus';
    import {
        Delete,
        Plus
        } from '@element-plus/icons-vue'
import { id } from 'element-plus/es/locale';
    // const ipcRenderer = useIpcRenderer();
    const windowStore = useWindowStore();
    // const { openGiftWindow, closeMainWindow, openCameraWindow, openDeployWindow, openModelWindow } = windowStore;

    // 打开礼物窗口
    function openGift(){
        // openGiftWindow()
        window.electron.ipcRenderer.send('window-new',{
            id: 'GIFT',
            title: '礼物窗口',
            route: '/gift',
            width: 420,
            height: 590,
            resizable: false,
            backgroundColor: "rgba(51, 51, 51, 1)",
        })
    }

    function createCamera(){
        // openCameraWindow()
        window.electron.ipcRenderer.send('window-new',{
            id: 'ADDCAMERA',
            title: '摄像头窗口',
            route: '/addCamera',
            width: 550,
            height: 500,
            resizable: false,
            backgroundColor: "rgba(51, 51, 51, 1)",
        })
    }

    function createDeploy(){
        // openDeployWindow()
        window.electron.ipcRenderer.send('window-new',{
            id: 'DEPLOY',
            title: '系统配置',
            route: '/deploy',
            width: 500,
            height: 270,
            resizable: false,
            backgroundColor: "rgba(51, 51, 51, 1)",
        })
    }
    function createModel(){
        // openModelWindow()
        window.electron.ipcRenderer.send('window-new',{
            id: 'MODEL',
            parentKey: "HOME",
            title: '礼物互动',
            route: '/model',
            modal: true,
            width: 500,
            height: 270,
            resizable: false,
            backgroundColor: "rgba(51, 51, 51, 1)",
        })
            //     id: this.modelId,
    //     isMainWin: false,
    //     modal: true,
    //     parentId: this.mainId,
    //     route: "/model",
    //     width: 500,
    //     height: 270,
    //     resizable: false,
    //     backgroundColor: "rgba(51, 51, 51, 1)",
    //     title: "礼物互动"
    }


    const activeId = ref(0)
    function changeCamera(index:number){
        activeId.value = index
    }
    

    // 最小化窗口
    const minimizeWin = ()=>{
        window.electron.ipcRenderer.send('window-minimize')
    }
    // 最大化窗口
    const maximizeWin = ()=>{
        window.electron.ipcRenderer.send('window-maximize')
    }
    // 关闭窗口
    const closeWin = ()=>{
        window.electron.ipcRenderer.send('window-close')
    }

    const value1 = ref(20)
    const value2 = ref(30)
    const value3 = ref(40)
    const value4 = ref(50)

    const radio = ref(3)
    const activeNames = ref(['1','2'])
    const handleChange = (val: CollapseModelValue) => {
    console.log(val)
    }
</script>

<template>
  <div class="common-layout">
    <el-container :style="{height: '100%'}">
      <el-header class="header" height="50px">
        <div class="logo">

        </div>
        <div class="title-bar"></div>
        <div class="util">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="我的消息"
                placement="bottom"
            >
                <div class="confirm">
                    <el-icon class="icon select-icon" size="16px" color="#FFFFFF"><BellFilled /></el-icon>
                </div>
            </el-tooltip>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="更多"
                placement="bottom"
            >
                <div class="more" @click="createDeploy">
                    <el-icon class="icon select-icon" size="16px" color="#FFFFFF"><Expand /></el-icon>
                </div>
            </el-tooltip>
            <div class="cover">
                <div class="img"></div>
                <p class="username">默认名称</p>
            </div>
            <p class="line"></p>
            <div class="btn-item" @click="minimizeWin">
                <el-icon class="icon select-icon" size="16px" color="#FFFFFF"><SemiSelect /></el-icon>
            </div>
            <div class="btn-item" @click="maximizeWin">
                <el-icon class="icon copy-icon" size="17px" color="#FFFFFF"><CopyDocument /></el-icon>
            </div>
            <div class="btn-item" @click="closeWin">
                <el-icon class="icon close-icon" size="17px" color="#FFFFFF"><CloseBold /></el-icon>
            </div>
        </div>
      </el-header>
      <el-container class="main">
        <el-aside class="main-menu">
            <div class="scene">
                <h3>
                    <span class="common-title">
                        直播场景
                    </span>
                    <p class="common-more">
                        <!-- 全部<el-icon style="display: flex; margin-left: 3px;" size="12px" color="#adadad"><ArrowRightBold /></el-icon> -->
                    </p>
                </h3>
                <div class="list">
                    <div class="item"><span>场景一</span><p class="more-icon"><el-icon size="12px" color="#b4b4b4"><MoreFilled /></el-icon></p></div>
                    <div class="item active"><span>场景二</span><p class="more-icon"><el-icon size="12px" color="#b4b4b4"><MoreFilled /></el-icon></p></div>
                    <div class="item"><span>场景三</span><p class="more-icon"><el-icon size="12px" color="#b4b4b4"><MoreFilled /></el-icon></p></div>
                    <div class="item"><span>场景四</span><p class="more-icon"><el-icon size="12px" color="#b4b4b4"><MoreFilled /></el-icon></p></div>
                    <div class="item add"><img class="img" src="@renderer/assets/images/add.png" alt=""></div>
                </div>
                <div class="content">
                    <!-- <h4>
                        <span class="content-title">
                            地图设置
                        </span>
                        <p class="content-more">
                            全部<el-icon style="display: flex; margin-left: 3px;" size="12px" color="#adadad"><ArrowRightBold /></el-icon>
                        </p>
                    </h4> -->

                    <el-collapse v-model="activeNames" @change="handleChange">
                        <el-collapse-item title="地图设置" name="1">
                            <div class="coll-list">
                                <div class="coll-item">
                                    <p class="left">
                                        <img class="img" src="@renderer/assets/images/ditu.png" alt="">
                                        <img class="img active" src="@renderer/assets/images/ditu-active.png" alt="">
                                        <span>地图：黑色玫瑰</span>
                                    </p>
                                    <p class="right">
                                        <img class="img" src="@renderer/assets/images/qiehuan.png" alt="">
                                    </p>
                                </div>
                                <div class="coll-item">
                                    <p class="left">
                                        <img class="img" src="@renderer/assets/images/changjinggaunli.png" alt="">
                                        <img class="img active" src="@renderer/assets/images/changjinggaunli-active.png" alt="">
                                        <span>舞台：海景客厅</span>
                                    </p>
                                    <p class="right">
                                        <img class="img" src="@renderer/assets/images/qiehuan.png" alt="">
                                    </p>
                                </div>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item title="抠像设置" name="2">
                            <div class="slider-list">
                                <div class="slider-item">
                                    <span class="demonstration">强度</span>
                                    <el-slider class="slider" v-model="value1" />
                                </div>
                                <div class="slider-item">
                                    <span class="demonstration">阈值</span>
                                    <el-slider class="slider" v-model="value2" />
                                </div>
                                <div class="slider-item">
                                    <span class="demonstration">羽化</span>
                                    <el-slider class="slider" v-model="value3" />
                                </div>
                                <div class="slider-item">
                                    <span class="demonstration">阴影</span>
                                    <el-slider class="slider" v-model="value4" />
                                </div>

                                <div class="coll-item">
                                    <p class="left">
                                        <img class="img" src="@renderer/assets/images/color.png" alt="">
                                        <img class="img active" src="@renderer/assets/images/color-active.png" alt="">
                                        <span>颜色</span>
                                    </p>
                                    <p class="right">
                                        <span class="color"></span>
                                        <span class="txt">409EFF</span>
                                    </p>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            <div class="common">
                <h3><span class="common-title">直播工具</span><p class="common-more">全部<el-icon style="display: flex; margin-left: 3px;" size="12px" color="#adadad"><ArrowRightBold /></el-icon></p></h3>
                <el-row class="list" :gutter="8">
                    <el-col :span="6">
                        <div class="item">
                            <img class="img" src="@renderer/assets/images/live-time.png" alt="">
                            <span>直播时长</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <img class="img" src="@renderer/assets/images/pk.png" alt="">
                            <span>直播连麦</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item" @click="openGift">
                            <img class="img" src="@renderer/assets/images/liwu.png" alt="">
                            <span>互动道具</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <img class="img" src="@renderer/assets/images/jilu.png" alt="">
                            <span>开播记录</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <img class="img" src="@renderer/assets/images/xinxi.png" alt="">
                            <span>账号信息</span>
                        </div>
                    </el-col>
                </el-row>
                <h3>
                    <span class="common-title">工会管理</span>
                    <span class="common-more">
                        <!-- 全部<el-icon style="display: flex; margin-left: 3px;" size="12px" color="#707070"><ArrowRightBold /></el-icon> -->
                    </span>
                </h3>
                <el-row class="list" :gutter="8">
                    <el-col :span="6">
                        <div class="item">
                            <img class="img" src="@renderer/assets/images/renzheng.png" alt="">
                            <span>工会认证</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <img class="img" src="@renderer/assets/images/guanli.png" alt="">
                            <span>主播管理</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!-- <div class="trade">

            </div> -->
        </el-aside>
        <el-container>
          <el-main class="main-center">
            <div class="main-contain">
                <h3 class="title">直播间配置</h3>
                <div class="content">
                    <div class="location">
                        <span>直播地址</span>
                        <input type="text" placeholder="请输入平台生成的直播地址">
                    </div>
                    <div class="radiu">
                        <span>场景半径</span>
                        <input type="text" placeholder="请输入直播场景半径" disabled>
                        <el-button class="butt" type="primary">修改</el-button>
                    </div>
                    <div class="video-root">
                        <div class="root-title">
                            <span>相机管理</span>
                            <el-button class="butt" type="primary" :icon="Plus" @click="createCamera">新增</el-button>
                        </div>
                        <div class="list">
                            <div class="item" v-for="item in 9" :key="item" :class="{active: item==activeId}" @click="changeCamera(item)">
                                <h3>
                                    <span class="txt">{{ item%2==0?'移动相机':'固定相机' }}</span>
                                    <el-dropdown trigger="click">
                                        <el-icon class="icon" size="14px" color="#b4b4b4"><MoreFilled /></el-icon>
                                        <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item :icon="Delete">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </h3>
                                <div class="util">
                                    <div class="comm username">
                                        <span class="txt">别称</span>
                                        <input class="input" type="text" value="DESPTOP-HH972OI(Remote Connection 1)" >
                                    </div>
                                    <div class="comm down">
                                        <span class="txt">景深</span>
                                        <el-radio-group v-model="radio">
                                            <el-radio :value="3">关闭</el-radio>
                                            <el-radio :value="6">开启</el-radio>
                                            <!-- <el-radio :value="9">手动</el-radio> -->
                                        </el-radio-group>
                                    </div>
                                    <div class="comm strag">
                                        <span class="txt">光圈</span>
                                        <el-slider :disabled="radio==3" class="slider" v-model="value3" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <p><span>开始直播</span></p>
                    <!-- <input type="color"> -->
                </div>
            </div>
            <div class="main-right">
                <div class="interaction">
                    <div class="title">
                        <span class="txt">互动记录</span>
                        <p><el-icon class="icon" color="#FFFFFF" size="14px"><Setting /></el-icon></p>
                    </div>
                    <div class="empty" v-if="false">
                        展示本场直播的礼物消息
                    </div>
                    <div class="list" v-else>
                        <div class="item" v-for="item in 100" :key="item">
                            <p class="level"></p>
                            <span class="name">小王子：</span>
                            <div class="content">
                                <span class="before-txt">送出小心心</span><img class="img" src="@renderer/assets/images/bound.png" alt=""><span class="after-txt">x1</span>
                            </div>
                            <p class="butt" @click="createModel"><span>互动</span></p>
                        </div>
                    </div>
                </div>
                <div class="pk-interaction">
                    <div class="title">
                        <span class="txt">PK互动道具记录</span>
                        <p><el-icon class="icon" color="#FFFFFF" size="14px"><Setting /></el-icon></p>
                    </div>
                    <div class="empty" v-if="true">
                        开播后可浏览本次直播的互动道具收入
                    </div>
                    <div class="list" v-else>
                        <div class="item" v-for="item in 1" :key="item">
                            <p class="level"></p>
                            <span class="name">小王子：</span>
                            <div class="content">
                                <span class="before-txt">送出小心心</span><img class="img" src="@renderer/assets/images/bound.png" alt=""><span class="after-txt">x1</span>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
          </el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>  
.common-layout{
    height: 100%;
    background-color: #222222;
    overflow: auto;
    .header{
        // -webkit-app-region: drag;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        background-color: #222222;
        box-sizing: border-box;
        position: sticky;
        z-index: 999;
        top: 0;
        .logo{

        }
        .title-bar{
            flex: 1;
            height: 100%;
            -webkit-app-region: drag;
        }
        .util{
            display: flex;
            align-items: center;
            .confirm{
                margin-right: 15px;
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 6px;
                cursor: pointer;
                // position: relative;
                // &::after{
                //     content: "";
                //     position: absolute;
                //     width: 8px;
                //     height: 8px;
                //     border-radius: 50%;
                //     background-color: red;
                // }
            }
            .confirm:hover{
                background-color: rgba(255,255,255,0.05);
            }
            .more{
                margin-right: 15px;
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 6px;
                cursor: pointer;
            }
            .more:hover{
                background-color: rgba(255,255,255,0.05);
            }
            .cover{
                height: 30px;
                background-color: rgba(255,255,255,0.3);
                border-radius: 15px;
                margin-right: 15px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                cursor: pointer;
                .img{
                    width: 30px;
                    height: 30px;
                    border-radius: 100%;
                    background-color: red;
                    background: url(../assets/images/sign-in.jpg) center;
                }
                .username{
                    color: #FFFFFF;
                    font-size: 14px;
                    padding: 0 10px 0 5px;
                }
            }
            .line{
                width: 1px;
                height: 12px;
                background-color: rgba(255,255,255,.3);
            }
            .btn-item{
                width: 30px;
                height: 30px;
                display: flex;
                // background-color: red;
                justify-content: center;
                align-items: center;
                margin-left: 15px;
                border-radius: 6px;
                cursor: pointer;
            }
            .btn-item:hover{
                background-color: rgba(255,255,255,0.05);
                // background-color: red;
            }
        }
    }
    .main{
        padding: 0 20px 20px;
        // box-sizing: border-box;
        overflow: auto;
        .main-menu{
            width: 400px;
            display: flex;
            flex-direction: column;
            .scene{
                height: 550px;
                // flex: 1;
                // overflow: auto;
                border-radius: 10px;
                background-color: rgba(255, 255, 255, .1);
                // padding: 0 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                h3{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 20px;
                    padding-top: 30px;
                    flex-shrink: 0;
                    .common-title{
                        color: #FFFFFF;
                        font-size: 16px;
                    }
                    .common-more{
                        color: #adadad;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                    }
                } 
                .list{
                    flex-shrink: 0;
                    // width: 100%;
                    display: flex;
                    margin: 0 20px;
                    padding-top: 5px;
                    flex-wrap: wrap;
                    border-bottom: 1px solid #3f3f3f;
                    padding-bottom: 15px;
                    box-sizing: border-box;
                    .item{
                        background-color: rgba(255,255,255,0.05);
                        border-radius: 5px;
                        display: flex;
                        height: 30px;
                        align-items: center;
                        justify-content: center;
                        color: #b4b4b4;
                        padding: 0 8px;
                        margin-right: 8px;
                        font-size: 14px;
                        flex-shrink: 0;
                        margin-top: 8px;
                        cursor: pointer;
                        font-weight: 600;
                        box-sizing: border-box;
                        position: relative;
                        &:nth-child(5n){
                            margin-right: 0;
                        }
                        .more-icon{
                            width: 16px;
                            height: 16px;
                            position: absolute;
                            right: 6px;
                            top: 50%;
                            transform: translateY(-50%);
                            background-color: rgb(85,85,85,);
                            border-radius: 5px;
                            display: none;
                            justify-content: center;
                            align-items: center;
                        }
                        &:hover{
                            .more-icon{
                                display: flex;
                            }
                        }
                    }
                    .active{
                        background: none;
                        border: 1px solid #409eff;
                        color: #FFFFFF;
                    }

                    .add{
                        padding: 0;
                        width: 30px;
                        margin-right: 0;
                        .img{
                            width: 20px;
                        }
                    }
                }
                .content{
                    flex: 1;
                    height: 0;
                    margin-left: 20px;
                    margin-right: 3px;
                    overflow: auto;
                    h4{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding-top: 10px;
                        .content-title{
                            color: #FFFFFF;
                            font-size: 14px;
                        }
                        .content-more{
                            color: #adadad;
                            font-size: 12px;
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                        }
                    }
                    :deep(.el-collapse){
                        border-color: #00000000;
                        .el-collapse-item__header{
                            background: none;
                            border-color: #00000000;
                            color: #FFFFFF;
                        }
                        .el-collapse-item__wrap{
                            background: none;
                            border-color: #00000000;
                            .el-collapse-item__content{
                                color: #FFFFFF;
                            }
                        }
                    }
                    .coll-list{
                        padding-right: 20px;
                        .coll-item{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            // background-color: rgba(255, 255, 255, .1);
                            border-radius: 10px;
                            height: 35px;
                            padding: 0 10px;
                            box-sizing: border-box;
                            .left{
                                display: flex;
                                align-items: center;
                                .img{
                                    width: 20px;
                                    margin-right: 5px;
                                }
                                .active{
                                    display: none;
                                }
                            }
                            .right{
                                display: none;
                                align-items: center;
                                .img{
                                    width: 20px;
                                    cursor: pointer;
                                }
                            }
                            &:hover{
                                background-color: rgba(255, 255, 255, .1);
                                .left{
                                    .img{
                                        display: none;
                                    }
                                    .active{
                                        display: block;
                                    }
                                }
                                .right{
                                    display: flex;
                                }
                            }
                            &:not(:last-child){
                                margin-bottom: 5px;
                            }
                        }
                    }
                    .slider-list{
                        margin-right: 20px;
                        .slider-item{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            height: 35px;
                            // padding: 0 10px;
                            padding-left: 10px;
                            box-sizing: border-box;
                            // &:not(:last-child){
                                margin-bottom: 8px;
                            // }
                            .demonstration{
                                width: 40px;
                            }
                            .slider{
                                flex: 1;
                            }
                        }
                        .coll-item{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            // background-color: rgba(255, 255, 255, .1);
                            border-radius: 10px;
                            height: 45px;
                            padding: 0 10px;
                            box-sizing: border-box;
                            .left{
                                display: flex;
                                align-items: center;
                                .img{
                                    width: 20px;
                                    margin-right: 5px;
                                }
                                .active{
                                    display: none;
                                }
                            }
                            .right{
                                display: flex;
                                align-items: center;
                                // width: 120px;
                                height: 30px;
                                border-radius: 5px;
                                padding: 0 5px;
                                background-color: rgb(245,245,245);
                                .color{
                                    width: 20px;
                                    height: 20px;
                                    background-color: #409eff;
                                    border-radius: 5px;
                                    margin-right: 8px;
                                    cursor: pointer;
                                }
                                .txt{
                                    color: #000000;
                                    font-size: 14px;
                                    padding-right: 10px;
                                }
                            }
                            &:hover{
                                background-color: rgba(255, 255, 255, .1);
                                .left{
                                    .img{
                                        display: none;
                                    }
                                    .active{
                                        display: block;
                                    }
                                }
                                .right{
                                    // display: flex;
                                    background-color: rgb(239,239,239);
                                }
                            }
                        }
                    }
                }
            }
            .common{
                // height: 555px;
                min-height: 300px;
                flex: 1;
                margin-top: 15px;
                border-radius: 10px;
                background-color: rgba(255, 255, 255, .1);
                padding: 0 20px;
                box-sizing: border-box;
                h3{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-top: 30px;
                    .common-title{
                        color: #FFFFFF;
                        font-size: 16px;
                    }
                    .common-more{
                        color: #adadad;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                    }
                } 
                .list{
                    .item{
                        width: 84px;
                        height: 84px;
                        // margin-right: 8px;
                        // background-color: red;
                        margin-top: 15px;
                        cursor: pointer;
                        border-radius: 5px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        &:nth-child(4n){
                            margin-right: 0;
                        }
                        &:hover{
                            background-color: rgba(255, 255, 255, .15);
                        }
                        .img{
                            height: 25px;
                        }
                        span{
                            color: #adadad;
                            font-size: 14px;
                            margin-top: 8px;
                        }
                    }
                }
            }
            // .trade{
            //     // height: 155px;
            //     // margin-top: 15px;
            //     border-radius: 10px;
            //     background-color: rgba(255, 255, 255, .1);
            // }
        }
        .main-center{
            margin-left: 15px;
            display: flex;
            padding: 0;
            .main-contain{
                flex: 1;
                // background-color: red;
                border-radius: 10px;
                // background-color: rgba(255, 255, 255, .1);
                color: #FFFFFF;
                display: flex;
                flex-direction: column;
                .title{
                    font-size: 22px;
                    font-weight: 600;
                    padding-top: 20px;
                    margin-right: 15px;
                }
                .content{
                    flex: 1;
                    // padding-left: 15px;
                    display: flex;
                    flex-direction: column;
                    overflow: auto;
                    .location{
                        margin-top: 30px;
                        font-size: 16px;
                        display: flex;
                        align-items: center;
                        padding-left: 20px;
                        margin-right: 15px;
                        span{
                            margin-right: 20px;
                        }
                        input{
                            flex: 1;
                            // margin-right: 20px;
                            // width: 700px;
                            height: 35px;
                            background-color: rgba(255, 255, 255, .1);
                            border: none;
                            outline: none;
                            border-radius: 5px;
                            color: #FFFFFF;
                            padding-left: 15px;
                            // &:focus-visible{
                            //     border: none;
                            // }
                        }
                    }
                    .radiu{
                        margin-top: 30px;
                        font-size: 16px;
                        display: flex;
                        align-items: center;
                        padding-left: 20px;
                        margin-right: 15px;
                        span{
                            margin-right: 20px;
                        }
                        input{
                            // flex: 1;
                            // margin-right: 20px;
                            // width: 200px;
                            height: 35px;
                            background-color: rgba(255, 255, 255, .1);
                            border: none;
                            outline: none;
                            border-radius: 5px;
                            color: #FFFFFF;
                            padding-left: 15px;
                            // &:focus-visible{
                            //     border: none;
                            // }
                            &:disabled{
                                // opacity: 0.5;

                            }
                        }
                        .butt{
                            margin-left: 20px;
                        }
                    }
                    .video-root{
                        margin-top: 30px;
                        font-size: 16px;
                        // padding-right: 20px;
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        overflow: auto;
                        margin-right: 5px;
                        .root-title{
                            padding-left: 20px;
                            display: flex;
                            align-items: center;
                            // justify-content: space-between;
                            padding-right: 20px;
                            span{
                                margin-right: 20px;
                            }
                        }
                        .list{
                            flex: 1;
                            overflow: auto;
                            display: flex;
                            flex-wrap: wrap;
                            align-content: flex-start;
                            padding-right: 5px;
                            box-sizing: border-box;
                            margin: 20px 0;
                            scrollbar-gutter: stable;
                            justify-content: space-between;
                            gap: 10px;
                            &::-webkit-scrollbar {
                                width: 5px;
                            }
                            .item{
                                background-color: rgba(255,255,255,0.1);
                                // width: 500px;
                                flex: 1;
                                height: 200px;
                                flex-shrink: 0;
                                border-radius: 10px;
                                min-width: 400px;
                                // margin-bottom: 10px;
                                // margin-right: 10px;
                                padding: 15px 20px;
                                box-sizing: border-box;
                                border: 1px solid rgba(255, 255, 255, .1);
                                &.active{
                                    // background-color: rgba(255,255,255,0.05);
                                    // border: 1px solid #409eff;
                                    border-color: #409eff;
                                }
                                &:nth-child(2n){
                                    // margin-left: 10px;
                                }
                                h3{
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    padding-bottom: 15px;
                                    border-bottom: 1px solid #3f3f3f;
                                    .txt{
                                        font-size: 16px;
                                    }
                                    .icon{
                                        cursor: pointer;
                                    }
                                }
                                .util{
                                    padding-top: 20px;
                                    padding-left: 10px;
                                    box-sizing: border-box;
                                    .comm{
                                        display: flex;
                                        align-items: center;
                                        height: 30px;
                                        padding-right: 30px;

                                        span{
                                            font-size: 14px;
                                            margin-right: 20px;
                                            flex-shrink: 0;
                                        }
                                        &:not(:last-child){
                                            margin-bottom: 10px;
                                        }
                                    }
                                    .username{
                                        .input{
                                            height: 30px;
                                            font-size: 14px;
                                            flex: 1;
                                            border: none;
                                            border-radius: 5px;
                                            color: #adadad;
                                            // margin-right: 30px;
                                            padding-left: 10px;
                                            outline: none;
                                            background-color: rgba(255, 255, 255, .1);
                                        }
                                    }
                                }
                            }
                            &::after{
                                flex: 1;
                                min-width: 400PX;
                                // margin-left: 10px;
                                height: 0;
                                padding: 15px 20px;
                                content: "";
                            }
                        }
                    }
                }
                .bottom{
                    background-color: #000000;
                    border-radius: 10px;
                    margin-bottom: 30px;
                    height: 80px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 15px;
                    p{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #FFFFFF;
                        border-radius: 10px;
                        background-color: #409eff;
                        padding: 15px 40px;
                        cursor: pointer;
                        span{
                            font-size: 18px;
                        }
                    }
                }
            }
            .main-right{
                width: 400px;
                overflow: auto;
                display: flex;
                flex-direction: column;
                gap: 15px;
                .interaction{
                    // margin-left: 15px;
                    width: 400px;
                    border-radius: 10px;
                    background-color: rgba(255, 255, 255, .1);
                    padding: 25px 0 25px 20px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    height: 50%;
                    .title{
                        padding-right: 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .txt{
                            color: #FFFFFF;
                            font-size: 16px;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                width: 15px;
                                height: 2px;
                                background-color: #409eff;
                                bottom: -10px;
                                left: 50%;
                                transform: translateX(-50%);
                            }
                        }
                        .icon{
                            cursor: pointer;
                        }
                    }
                    .empty{
                        padding-right: 20px;
                        flex: 1;
                        color: #979797;
                        margin-top: 15px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .list{
                        flex: 1;
                        height: 0;
                        margin-top: 30px;
                        overflow: auto;
                        margin-right: 3px;
                        .item{
                            display: flex;
                            align-items: center;
                            flex-shrink: 0;
                            &:not(:last-child){
                                margin-bottom: 15px;
                            }
                            .level{
                                width: 35px;
                                height: 16px;
                                margin-right: 5px;
                                background: url(@renderer/assets/images/level.png) 0 0 / cover;
                            }
                            .name{
                                color: #409eff;
                                font-size: 14px;
                                font-weight: 600;
                            }
                            .content{
                                display: flex;
                                align-items: center;
                                .before-txt{
                                    color: rgb(251,208,92);
                                    margin-right: 10px;
                                    font-weight: 600;
                                    font-size: 14px;
                                }
                                .img{
                                    width: 30px;
                                }
                                .after-txt{
                                    color: rgb(251,208,92);
                                    margin-left: 10px;
                                    font-size: 14px;
                                    font-weight: 600;
                                }
                            }
                            .butt{
                                margin-left: 20px;
                                color: #FFFFFF;
                                background-color: #409eff;
                                padding: 5px 10px;
                                border-radius: 5px;
                                font-size: 12px;
                                cursor: pointer;
                                &:hover{
                                    background-color: #3a8ee6;
                                }
                            }
                        }
                    }
                }
                .pk-interaction{
                    // margin-left: 15px;
                    height: 0;
                    flex: 1;
                    width: 400px;
                    border-radius: 10px;
                    background-color: rgba(255, 255, 255, .1);
                    padding: 25px 0 25px 20px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    .title{
                        padding-right: 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .txt{
                            color: #FFFFFF;
                            font-size: 16px;
                            position: relative;
                            &::after{
                                content: "";
                                position: absolute;
                                width: 15px;
                                height: 2px;
                                background-color: #409eff;
                                bottom: -10px;
                                left: 50%;
                                transform: translateX(-50%);
                            }
                        }
                        .icon{
                            cursor: pointer;
                        }
                    }
                    .empty{
                        padding-right: 20px;
                        flex: 1;
                        color: #979797;
                        margin-top: 15px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .list{
                        flex: 1;
                        height: 0;
                        margin-top: 30px;
                        overflow: auto;
                        margin-right: 3px;
                        .item{
                            display: flex;
                            align-items: center;
                            flex-shrink: 0;
                            &:not(:last-child){
                                margin-bottom: 15px;
                            }
                            .level{
                                width: 35px;
                                height: 16px;
                                margin-right: 5px;
                                background: url(@renderer/assets/images/level.png) 0 0 / cover;
                            }
                            .name{
                                color: #409eff;
                                font-size: 14px;
                                font-weight: 600;
                            }
                            .content{
                                display: flex;
                                align-items: center;
                                .before-txt{
                                    color: rgb(251,208,92);
                                    margin-right: 10px;
                                    font-weight: 600;
                                    font-size: 14px;
                                }
                                .img{
                                    width: 30px;
                                }
                                .after-txt{
                                    color: rgb(251,208,92);
                                    margin-left: 10px;
                                    font-size: 14px;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                }
            }
            
        }
    }
}
</style>